<template>
	<view class="statistics">
		<!-- <u-navbar title="" :is-back="false" :border-bottom="false" :background="navBac"></u-navbar> -->
		<div class="top">
			<image src="/static/icons/new_name.png" alt="" />
			<div class="l18n" @click="l18nShow = true">
				<div class="l18nBox">
					<div class="language">{{ language }}</div>
					<image src="/static/icons/change.png" alt="" />
				</div>
			</div>
		</div>
		<div class="charts">
			<div class="title">
				<div class="left">
					<div class="line"></div>
					<div class="text">
						{{ $t('总客户数量') }}
						<text class="num">({{ total1 }})</text>
					</div>
				</div>
				<div class="select">
					<div class="text" @click="select(0)">{{ selectLabel1 }}</div>
					<u-select @confirm="confirmDate" v-model="selectShow" :list="list"></u-select>
				</div>
			</div>
			<div class="chart1">
				<!-- 总客户数量 -->
				<pillar-charts :seriesData="charts1" />
			</div>

			<div class="title">
				<div class="left">
					<div class="line"></div>
					<div class="text">
						{{ $t('今日联系客户数量') }}
						<text class="num">({{ total2 }})</text>
					</div>
				</div>
				<div class="select">
					<div class="text" @click="select(1)">{{ selectLabel2 }}</div>
					<!-- <u-select @confirm="confirmDate" v-model="selectShow2" :list="list"></u-select> -->
				</div>
			</div>

			<div class="chart2">
				<!-- 未服务 -->
				<pillar-charts :seriesData="charts2" />
			</div>
		</div>

		<!-- l18n-->
		<u-select v-model="l18nShow" :list="selectList" @confirm="confirm"></u-select>
		<release-btn></release-btn>
	</view>
</template>

<script>
import ReleaseBtn from '@/components/ReleaseBtn.vue'
import pillarCharts from './components/pillarCharts';
// 
export default {
	components: {
		pillarCharts,
		ReleaseBtn
	},
	data() {
		return {
			//多语言弹窗
			language: '汉语',
			l18nShow: false,
			selectList: [
				{
					value: '1',
					label: '汉语'
				},
				{
					value: '2',
					label: '维语'
				},
				{
					value: '3',
					label: '哈语'
				}
			],
			total1: '', //总客户数量
			total2: '', //总客户数量
			no_service_total: '', //未服务数量
			charts1: [],
			charts2: [],
			selectShow: false,
			list: [
				{
					value: '0',
					label: '全部'
				},
				{
					value: '1',
					label: '今天'
				},
				{
					value: '2',
					label: '近三天'
				},
				{
					value: '3',
					label: '近七天'
				},
				{
					value: '4',
					label: '一个月内'
				}
			],
			time: '0',
			time2: '0',
			selectLabel1: '全部',
			selectLabel2: '全部',
			navBac: {
				backgroundImage: "url('http://app.maifangqi.com/imgs/ywd/bac2.png')",
				backgroundSize: '100%'
			},
			chooseSelect: 0,
		};
	},
	onLoad() {
		// this.$i18n.locale = 'cn';
		this.getChart();
		// this.getTabbar(this.is_house, this.is_service)
	},
	methods: {
		select(value) {
			this.chooseSelect = value
			this.selectShow = true
		},
		getChart() {
			this.$u.api.statistics_count({ search_type: 0, time: this.time }).then(res => {
				const { total, total_xf, total_esf, total_zf, } = res.data;
				this.total1 = total;
				this.charts1 = [total_esf, total_xf, total_zf];
			});
			this.$u.api.statistics_count({ search_type: 1, time: this.time2 }).then(res => {
				const { total, total_xf, total_esf, total_zf, } = res.data;
				this.total2 = total;
				this.charts2 = [total_esf, total_xf, total_zf];
			});
		},
		confirmDate(e) {
			console.log(e);

			if (this.chooseSelect === 0) {
				this.selectLabel1 = e[0].label;
				this.time = e[0].value;
			} else {
				this.selectLabel2 = e[0].label;
				this.time2 = e[0].value;
			}

			this.getChart();
		},
		confirm(e) {
			const language = e[0].label
			this.language = language
			if (language === '汉语') {
				this.$i18n.locale = 'cn';
			} else if (language === '维语') {
				this.$i18n.locale = 'ey';
			} else {
				this.$i18n.locale = 'kk'
			}

			uni.setStorage({
				key: 'locale',
				data: this.$i18n.locale
			})
		},
		getTabbar(is_house, is_service) {
			if (is_service === 1 && is_house === 1) {
				uni.setTabBarItem({// 修改底部导航
					index: 2,
					visible: true
				});
				uni.setTabBarItem({// 修改底部导航
					index: 0,
					visible: true
				});
				uni.setTabBarItem({// 修改底部导航
					index: 1,
					visible: true
				});
			}

			if (is_service === 1 && is_house === 0) {
				uni.setTabBarItem({// 修改底部导航
					index: 2,
					visible: true
				});
				uni.setTabBarItem({// 修改底部导航
					index: 0,
					visible: false
				});
				uni.setTabBarItem({// 修改底部导航
					index: 1,
					visible: false
				});

			}

			if (is_service === 0 && is_house === 1) {
				uni.setTabBarItem({// 修改底部导航
					index: 2,
					visible: false
				});
				uni.setTabBarItem({// 修改底部导航
					index: 0,
					visible: true
				});
				uni.setTabBarItem({// 修改底部导航
					index: 1,
					visible: true
				});
			}
		},
	},


};
</script>
<style scoped lang="scss">
.statistics {
	background: url('~@/static/icons/bac3.png') no-repeat;
	background-size: 100%;
}

.top {
	@include flex($justify: space-between, $aligin: center);
	padding: 20rpx;
	padding-top: 50rpx;
	background-color: #fff;
	background: url('~@/static/icons/bac3.png') no-repeat;
	background-size: 100%;

	image {
		width: 150rpx;
		height: 60rpx;
	}

	.l18n {
		@include flex($aligin: center, $justify: center);
		// width: 132rpx;
		padding: 0 20rpx;
		height: 54rpx;
		background: rgba(255, 255, 255, 0.2);
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		opacity: 1;
		border: 2rpx solid #f8f8f8;
		margin-right: 200rpx;

		.l18nBox {

			@include flex($aligin: center);

			.language {
				font-size: 26rpx;
				color: #232323;
				opacity: 0.5;
			}

			image {
				margin-left: 10rpx;
				width: 24rpx;
				height: 24rpx;
			}
		}
	}
}

.charts {
	height: 90vh;
	background-color: #f8f8f8;
	border-radius: 40rpx 40rpx 0 0;
	border: 2rpx solid rgba(112, 112, 112, 0.08);
}

.chart1,
.chart2 {
	padding: 20rpx;
	margin: 0 20rpx;
	background-color: #fff;
	border-radius: 20rpx;
}

.title {
	border-radius: 40rpx 40rpx 0 0;
	padding: 30rpx;
	background-color: #f8f8f8;

	@include flex($aligin: center, $justify: space-between);

	.left {
		@include flex($aligin: center);

		.line {
			width: 8rpx;
			height: 22rpx;
			background: #0089ff;
			border-radius: 4rpx;
			margin-right: 20rpx;
		}

		.text {
			color: #232323;
			font-size: 28rpx;
			font-weight: bold;

			.num {
				margin-left: 10rpx;
				font-size: 24rpx;
				color: #666666;
			}
		}
	}

	.select {
		@include flex($aligin: center, $justify: center);
		width: 112rpx;
		height: 52rpx;
		background: #fff;
		border: 2rpx solid rgba(183, 181, 181, 0.2);
		border-radius: 8rpx;
		color: #666666;
		font-size: 24rpx;
	}
}
</style>
